<template>
  <div id="lineAndBarEchart" style="height: 100%;"/>
</template>
<script>
    import * as echarts from "echarts";

    export default {
        props: {
            data: {
                type: Array,
                default: []
            },
            // id:{
            //     type:String,
            //     default: ""
            // }
        },
        data() {
            return {
                lineAndBarEchart: null
            }
        },
        created() {
            let num = [], money = [], date = [];
            //库存
            this.data.map(i => {
                num.push(i.singular); // 库存数量
                money.push(i.abnormalBigDecimal); //库存金额
                date.push(i.singDate);//日期
            });

            this.$nextTick(() => {
                this.lineAndBarEchart = echarts.init(document.getElementById('lineAndBarEchart'), "macarons");
                const colors = ['#5470C6', '#FF8667', '#EE6666'];
                this.lineAndBarEchart.setOption({
                    color: colors,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    grid: {
                        right: '9%',
                        left: '6%',
                        bottom:'8%'
                    },
                    legend:{
                        show:true,
                        right:'1%'
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: date
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '金额',
                        position: 'right',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} '
                        }
                    }, {
                        type: 'value',
                        name: '数量',
                        position: 'left',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ',
                            color:'#FF8667'
                        }
                    }],
                    series: [{
                        name: '金额',
                        type: 'bar',
                        yAxisIndex: 0,
                        barWidth: '30',
                        showBackground: true,
                        backgroundStyle: {
                            color: '#DEE4EE'
                        },
                        itemStyle: {
                            // 设置柱状渐变色
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                {
                                    offset: 0,
                                    color: '#91CDF6'
                                }, {
                                    offset: 1,
                                    color: '#447CFF'
                                }
                            ]),
                        },
                        data: money
                    }, {
                        name: '数量',
                        type: 'line',
                        smooth: true,
                        yAxisIndex: 1,
                        itemStyle:{
                            color:'#FF8667'
                        },
                        data: num
                    }]
                });

                let that = this;
                window.addEventListener('resize', () => {
                    that.lineAndBarEchart.resize()
                });
            })
        }
    }
</script>
